{% extends 'base.html' %}
{% load custom_filters %}

{% block title %}{{ site_info.site_name }} - 首页{% endblock %}

{% block extra_css %}
<style>
    .rule-content {
        max-height: 300px;
        overflow-y: auto;
        padding-right: 10px;
    }
    
    .rule-card {
        height: 450px;
        overflow: hidden;
    }
    
    .copy-btn {
        position: absolute;
        z-index: 10;
    }
    
    /* 定制滚动条样式 */
    .rule-content::-webkit-scrollbar {
        width: 6px;
    }
    
    .rule-content::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 3px;
    }
    
    .rule-content::-webkit-scrollbar-thumb {
        background: #888;
        border-radius: 3px;
    }
    
    .rule-content::-webkit-scrollbar-thumb:hover {
        background: #555;
    }
    
    /* 代码块样式 */
    .rule-content pre {
        background-color: #f8f9fa;
        padding: 10px;
        border-radius: 4px;
        overflow-x: auto;
    }
    
    .rule-content code {
        font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
        font-size: 0.9em;
    }
    
    /* 调整标题大小 */
    .rule-content h1 {
        font-size: 1.75rem;
    }
    
    .rule-content h2 {
        font-size: 1.5rem;
    }
    
    .rule-content h3 {
        font-size: 1.3rem;
    }
    
    .rule-content h4 {
        font-size: 1.2rem;
    }
    
    .rule-content h5 {
        font-size: 1.1rem;
    }
    
    .rule-content h6 {
        font-size: 1rem;
    }
    
    /* 筛选区样式优化 */
    .filter-group {
        margin-bottom: 1.2rem;
    }
    
    .filter-title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0.5rem;
    }
    
    .filter-badge {
        font-size: 0.8rem;
    }
    
    .tag-list {
        max-height: 300px;
        overflow-y: auto;
        padding-right: 5px;
    }
    
    /* 定制标签列表滚动条 */
    .tag-list::-webkit-scrollbar {
        width: 4px;
    }
    
    .tag-list::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 2px;
    }
    
    .tag-list::-webkit-scrollbar-thumb {
        background: #ccc;
        border-radius: 2px;
    }
    
    .tag-list::-webkit-scrollbar-thumb:hover {
        background: #999;
    }
    
    .tag-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        margin-bottom: 0.2rem;
    }
    
    .tag-name {
        flex-grow: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .tag-count {
        margin-left: 0.5rem;
        flex-shrink: 0;
    }
</style>
{% endblock %}

{% block content %}
<div class="row">
    <!-- 左侧筛选区域 (25%) -->
    <div class="col-md-3 col-lg-3 col-xl-3">
        <div class="filter-sidebar rounded border p-3">
            <h4 class="mb-3">筛选</h4>
            
            <form method="get" action="{% url 'rules:list' %}" id="filter-form">
                <div class="mb-3">
                    <label for="search" class="form-label">搜索</label>
                    <div class="input-group">
                        <input type="text" class="form-control" id="search" name="q" value="{{ query }}" placeholder="搜索规则...">
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-search"></i>
                        </button>
                        <button type="button" class="btn btn-outline-secondary" id="reset-btn">
                            <i class="fas fa-undo"></i>
                        </button>
                    </div>
                </div>
                
                <div class="filter-group">
                    <div class="filter-title">
                        <label class="form-label mb-0">编程语言</label>
                        <span class="filter-badge badge bg-secondary">{{ language_tags|length }}</span>
                    </div>
                    <div class="form-check tag-list">
                        {% for tag in language_tags %}
                        <div class="form-check tag-item">
                            <div>
                                <input class="form-check-input auto-submit" type="checkbox" name="tags" value="{{ tag.id }}" id="tag-{{ tag.id }}" {% if tag.id|stringformat:"i" in selected_tags %}checked{% endif %}>
                                <label class="form-check-label tag-name" for="tag-{{ tag.id }}">{{ tag.name }}</label>
                            </div>
                            <span class="tag-count badge bg-secondary">{{ tag.rules.count }}</span>
                        </div>
                        {% endfor %}
                    </div>
                </div>
                
                <div class="filter-group">
                    <div class="filter-title">
                        <label class="form-label mb-0">使用场景</label>
                        <span class="filter-badge badge bg-secondary">{{ scenario_tags|length }}</span>
                    </div>
                    <div class="form-check tag-list">
                        {% for tag in scenario_tags %}
                        <div class="form-check tag-item">
                            <div>
                                <input class="form-check-input auto-submit" type="checkbox" name="tags" value="{{ tag.id }}" id="tag-{{ tag.id }}" {% if tag.id|stringformat:"i" in selected_tags %}checked{% endif %}>
                                <label class="form-check-label tag-name" for="tag-{{ tag.id }}">{{ tag.name }}</label>
                            </div>
                            <span class="tag-count badge bg-secondary">{{ tag.rules.count }}</span>
                        </div>
                        {% endfor %}
                    </div>
                </div>
                
                <button type="submit" class="btn btn-primary w-100 mb-2">应用筛选</button>
                <button type="button" class="btn btn-outline-secondary w-100" id="reset-all-btn">重置所有筛选</button>
            </form>
        </div>
    </div>
    
    <!-- 右侧规则展示区域 (75%) -->
    <div class="col-md-9 col-lg-9 col-xl-9">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h2>热门规则</h2>
            <a href="{% url 'rules:submit' %}" class="btn btn-success">
                <i class="fas fa-plus me-1"></i> 提交规则
            </a>
        </div>
        
        {% if rules %}
            <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">
                {% for rule in rules %}
                    <div class="col">
                        <div class="card rule-card h-100 position-relative">
                            <div class="position-absolute top-0 end-0 p-2" style="z-index: 10;">
                                <div class="btn-group">
                                    <button class="btn btn-sm btn-outline-secondary copy-btn" data-rule-id="{{ rule.id }}" title="复制内容">
                                        <i class="fas fa-copy"></i>
                                    </button>
                                    <button class="btn btn-sm btn-outline-secondary download-md-btn" data-rule-id="{{ rule.id }}" title="下载MD文件">
                                        <i class="fas fa-download"></i>
                                    </button>
                                    <button class="btn btn-sm btn-outline-secondary copy-url-btn" data-rule-id="{{ rule.id }}" title="复制链接">
                                        <i class="fas fa-link"></i>
                                    </button>
                                </div>
                            </div>
                            <div class="card-body">
                                <h5 class="card-title">{{ rule.title }}</h5>
                                <div class="mb-2">
                                    {% for tag in rule.tags.all %}
                                        <span class="badge {% if tag.category == 'language' %}bg-primary{% else %}bg-success{% endif %} tag-badge">{{ tag.name }}</span>
                                    {% endfor %}
                                </div>
                                <div class="rule-content">
                                    {{ rule.content|markdown_safe }}
                                </div>
                            </div>
                            <div class="card-footer bg-transparent d-flex justify-content-between align-items-center">
                                <small class="text-muted">
                                    <span>作者: {{ rule.author.username }}</span>
                                    {% if rule.visit_count %}
                                    <span class="ms-2">
                                        <i class="fas fa-eye"></i> {{ rule.visit_count }}
                                    </span>
                                    {% endif %}
                                </small>
                                <a href="{% url 'rules:detail' rule.id %}" class="btn btn-sm btn-link">查看详情</a>
                            </div>
                        </div>
                    </div>
                {% endfor %}
            </div>
            
            {% if rules.count > 12 %}
                <div class="text-center mt-4">
                    <a href="{% url 'rules:list' %}" class="btn btn-outline-primary">查看更多规则</a>
                </div>
            {% endif %}
        {% else %}
            <div class="alert alert-info">
                目前还没有规则，请 <a href="{% url 'rules:submit' %}">提交</a> 你的第一个规则！
            </div>
        {% endif %}
    </div>
</div>

{% block extra_js %}
<script>
    $(document).ready(function() {
        // 复制规则
        $('.copy-btn').click(function() {
            var ruleId = $(this).data('rule-id');
            
            $.ajax({
                url: '/rules/copy/' + ruleId + '/',
                type: 'GET',
                dataType: 'json',
                success: function(data) {
                    if (data.success) {
                        // 创建临时textarea来复制内容
                        var tempTextarea = $('<textarea>');
                        $('body').append(tempTextarea);
                        tempTextarea.val(data.content).select();
                        document.execCommand('copy');
                        tempTextarea.remove();
                        
                        // 显示复制成功提示
                        alert('规则内容已复制到剪贴板！');
                    }
                }
            });
        });

        // 下载MD文件功能
        $('.download-md-btn').click(function() {
            var ruleId = $(this).data('rule-id');
            window.location.href = "{% url 'rules:download_md' 0 %}".replace(/0/, ruleId);
        });

        // 复制URL按钮功能
        $('.copy-url-btn').click(function() {
            var ruleId = $(this).data('rule-id');
            
            $.ajax({
                url: "{% url 'rules:get_url' 0 %}".replace(/0/, ruleId),
                type: 'GET',
                dataType: 'json',
                success: function(data) {
                    if (data.success) {
                        // 创建临时textarea来复制URL
                        var tempTextarea = $('<textarea>');
                        $('body').append(tempTextarea);
                        tempTextarea.val(data.url).select();
                        document.execCommand('copy');
                        tempTextarea.remove();
                        
                        // 显示复制成功提示
                        alert('规则链接已复制到剪贴板！');
                    }
                }
            });
        });
        
        // 点击标签自动提交搜索
        $('.auto-submit').change(function() {
            $('#filter-form').submit();
        });
        
        // 重置搜索框
        $('#reset-btn').click(function() {
            $('#search').val('');
            $('#filter-form').submit();
        });
        
        // 重置所有筛选
        $('#reset-all-btn').click(function() {
            $('#search').val('');
            $('.auto-submit').prop('checked', false);
            $('#filter-form').submit();
        });
    });
</script>
{% endblock %}
{% endblock %} 